<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${video.title}">新闻详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="/static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="/static/css/animate.compat.css" th:href="@{/animate.compat.css}">
    <link rel="stylesheet" href="/static/css/typo.css" th:href="@{/css/typo.css}">

    <link rel="stylesheet" href="/static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="/static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">


</head>
<body>
<!-- 导航 -->
<nav th:replace="_fragments :: menu(1)" id="top"
     class="ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInDown">
    <div class=" ui container">
        <div class="ui secondary stackable menu">
            <h1 class="ui violet header item">WIDS</h1>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="folder icon"></i> 分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="window close outline icon"></i> 归档</a>
            <a href="#" class="m-item item m-mobile-hide"> <i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="question circle outline icon"></i> 关于 WIDS</a>

            <div class="right item m-mobile-hide">
                <div class="ui icon transparent input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>


    </div>


</nav>
<!-- 中间内容 -->
<main class="m-large m-container-small animated fadeInUp">
    <div class="ui container">
<!--        <video width="900" height="500" controls autoplay>-->
<!--            <source th:src="${video.url}" type="video/ogg">-->
<!--            <source th:src="${video.url}" type="video/mp4">-->
<!--            <source th:src="${video.url}" type="video/webm">-->
<!--            <object data="movie.mp4" width="320" height="240">-->
<!--                <embed width="320" height="240" th:src="${video.url}">-->
<!--            </object>-->
<!--        </video>-->
<!--        <video width="900" height="500" controls="controls">-->
        <h1 class="ui center aligned header" th:text="${video.title}"></h1>
        <div style="height: 20px;"></div>
        <video width="100%" height="100%" controls="controls">
            <source th:src="${video.url}" type="video/mp4">
            您的浏览器暂不支持视频播放
        </video>
    </div>


</main>

<div class="m-tiny m-fixed m-right-bottom">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc blue button">目录</button>
        <a href="#comment-container" class="ui blue button">留言</a>
        <a href="#top" class="ui blue button">
            <i class="chevron up icon"></i>
        </a>
    </div>
</div>
<div class="ui top-container flowing popup transition hidden"
     style="width: 240px !important;"
>

    <ol class="js-toc">

    </ol>
</div>


<!-- 底部 -->
<footer th:replace="_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">


</footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="/static/lib/tocbot/tocbot.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->


<script th:inline="javascript">



</script>


</body>
</html>